<template>
	<li
		:id="'li_' + posY + '_' + posX"
		@mouseover.prevent="HightlightCells"
		@click="SetLayout"
		@touchstart="handleTouchStart"
		@touchend="handleTouchEnd"
	>
		<span>{{ posY }}X{{ posX }}</span>
	</li>
</template>

<script setup name="LayoutCell">
const emit = defineEmits(["hovercells", "layout"]);

const props = defineProps({
	posX: Number,
	posY: Number
});

const HightlightCells = () => {
	// this.$bus.$emit('hightlightcells', this.posY, this.posX)
	emit("hovercells", props.posY, props.posX);
};
const SetLayout = () => {
	emit("layout", props.posY, props.posX);
	// this.$bus.$emit('setlayout', this.posY, this.posX)
	// this.$bus.$emit('showlayoutwnd',false)
};

// 移动端触摸事件处理
const handleTouchStart = e => {
	e.stopPropagation();
	// 添加触摸反馈样式
	e.currentTarget.classList.add("touch-active");
};

const handleTouchEnd = e => {
	e.stopPropagation();
	// 移除触摸反馈样式
	e.currentTarget.classList.remove("touch-active");
	// 触发布局设置
	SetLayout();
};
</script>

<style lang="scss" scoped>
li {
	float: left;
	width: 40px;
	height: 40px;
	margin-right: 5px;
	margin-bottom: 5px;
	background-color: #828282;
	text-align: center;
	// 去掉前面的点
	list-style: none;
}

li span {
	line-height: 40px;
	color: #fff;
	cursor: default;
	visibility: hidden;
}

li:hover span {
	visibility: visible;
}

/* 移动端触摸反馈 */
li.touch-active {
	background-color: #b4b4b4 !important;
	transform: scale(0.95);
	transition: transform 0.1s ease, background-color 0.1s ease;
}

li.touch-active span {
	visibility: visible;
}

/* 移动端优化 */
@media (max-width: 768px) {
	li {
		min-width: 44px;
		min-height: 44px;
		width: 44px;
		height: 44px;
		margin-right: 3px;
		margin-bottom: 3px;
	}

	li span {
		line-height: 44px;
		font-size: 12px;
	}
}
</style>
